import React from 'react';
import {
    Form,
  } from 'antd-mobile'
  
import { Button, Radio } from 'antd';
import { fromJS } from 'immutable';

export default class Center extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            info: fromJS({
                name: 'major',
                location: {
                    province: '广东',
                    city: '广州'
                },
                favor: ['跳舞', '骑行', '逛街']
            })
        }     
    }

    render() {
        const { info } = this.state
        return (
            <div>
                <Form
                onFinish={null}
                footer={null}
                >
                    <Form.Item
                    name='姓名'
                    label='姓名'
                    rules={[{ required: false}]}
                    >
                        <span>{info.get('name')}</span>
                        {/* info.setIn(['name'],'major变啦') 相当于 info.name='major变啦' */}
                        <Button type="primary" onClick={() => this.setState({info: info.setIn(['name'],'major变啦')})}>修改</Button>
                    </Form.Item>
                    <Form.Item name='address' label='地址'>
                        <div>
                            省份：{info.get('location').get('province')}
                        </div>
                        <div>
                            城市：{info.get('location').get('city')}
                            {/* info.setIn(['location', 'city'],'深圳') 相当于 info.location.city='深圳' */}
                            <Button type="primary" onClick={() => this.setState({info: info.setIn(['location', 'city'],'深圳')})}>
                                修改
                            </Button>
                        </div>
                    </Form.Item>
                    <Form.Item name='address' label='地址'>
                        <div>
                            {info.get('favor').map((item,index) => {
                                return(
                                <div>
                                    {item}
                                    {/* info.setIn(['favor', index], `${item}变啦`) 相当于 info.favor[index]=`${item}变啦` */}
                                    <Button type="primary" onClick={() => this.setState({info: info.setIn(['favor', index], `${item}变啦`)})}>
                                        修改
                                    </Button>
                                    {/* info.setIn(['favor', index], `${item}变啦`) 相当于 info.favor=info.favor.splice(index, 1) */}
                                    <Button type="primary" danger onClick={() => this.setState({info: info.updateIn(['favor'], arr => arr.splice(index, 1))})}>
                                        删除
                                    </Button>
                                </div>
                                )
                            })}
                        </div>
                    </Form.Item>
                </Form>
            </div>
        )
    }
}
